<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">用户名称</div>
    <el-input class="factoryInput" v-model="userName"></el-input>
    <el-button class="searchBtn" @click="searchUser()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" ref="userForm" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="200">
        <template #default="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" width="180">
        <template #default="scope">
          <span>{{ scope.row.password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册类型" width="180">
        <template #default="scope">
          <span>{{ scope.row.character }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" width="250">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="editClick(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-dialog title="更改用户信息" v-model="dialogFormVisible">
    <el-form :model="selectUser">
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input v-model="selectUser.account" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="selectUser.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="selectUser.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" :label-width="formLabelWidth">
        <el-input v-model="selectUser.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="注册类型" :label-width="formLabelWidth">
        <el-select v-model="selectUser.character">
          <el-option label="云工厂管理员" value="云工厂管理员"></el-option>
          <el-option label="经销商" value="经销商"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'UserManage',
  data() {
    return {
      tableData: [
        {
          id: '',
          account: '',
          password: '',
          name: '',
          character: '',
          phone: '',
        },
      ],
      newTable: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      selectUser: {},
      userName: '',
    }
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    editClick(e) {
      this.dialogFormVisible = !this.dialogFormVisible
      this.selectUser = e
    },
    confirmEdit() {
      axios
        .post('/user/modifyUser', this.selectUser)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(success)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.dialogFormVisible = false
      ElMessage.success({
        message: '修改成功',
        type: 'success',
      })
    },
    //删除
    handleDelete(e) {
      this.selectUser = e
      axios
        .post('/user/deleteUser', this.selectUser)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(success)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.tableData.forEach(function (item, index, arr) {
        if (item == e) {
          arr.splice(index, 1)
        }
      })
      ElMessage.success({
        message: '删除成功',
        type: 'success',
      })
    },
    //查询
    searchUser() {
      console.log('search')
      this.newTable = this.tableData
      this.tableData = this.newTable.filter((val) => val.name == this.userName)
    },
    //重置
    reset() {
      this.getUsers()
    },
    //获取表格中用户
    getUsers() {
      axios
        .get('/user/getUsers')
        .then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
          this.newTable = this.tableData
          this.tableData = this.newTable.filter((val) => val.name != 'admin')
        })
        .catch((err) => {
          console.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  font-weight: bold;
}
</style>
